<template>
  <view>
    <view class="choose-head">
      <u-icon name="arrow-left" size="32rpx" @click="toBack"></u-icon>
      <view class="head-title">选择比赛</view>
      <view class="head-set" @click="chooseShow = true" >设置</view>
    </view>
    <CompetitionPopup :show="chooseShow" @onClose="onClose"></CompetitionPopup>
    <view class="choose-top">
      <u-button :text="item.name" shape="circle" :color="btncount === item.type?'#2F7EFC':''"
        v-for="item,index in classifyList" :key="index" @click="classifyChange(item)"></u-button>
    </view>
    <view class="choose-prompt">
      比赛太多可以点击右上角“设置” 关注常用的联赛
    </view>
    <view class="choose-dates">
      <view :class="dateCount === index ?'date-nav-active':'date-nav'" v-for="item,index in dateList" :key="index"
        @click="onDateChange(index)">
        <view class="nav-week">{{item.name}}</view>
        <view class="nav-date">{{item.title}}</view>
      </view>
    </view>
    <view class="choose-competition">
      <view class="competition-nav">
        <view class="nav-top">
          <view class="competition-label">阿尔U21</view>
          <view class="competition-btn">选择</view>
        </view>
        <view class="nav-trip">
          <view class="competition-time">22:00</view>
          <view class="competition-condition">
            <view>普斯卡什学院</view>
            <view>
              <image src="@/static/icon/specialcolumnPage/VS.png" mode=""></image>
            </view>
            <view>乌兹别克斯坦</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import CompetitionPopup from '../components/Competition-Popup/index.vue'
  export default {
    components: {
      CompetitionPopup
    },
    data() {
      return {
        chooseShow: false,
        btncount: 2,
        classifyList: [{
          name: '关注',
          type: 1
        }, {
          name: '足球',
          type: 2
        }, {
          name: '篮球',
          type: 3
        }],
        dateCount: 0,
        dateList: [{
          name: '周四',
          title: '1月18日',
        }, {
          name: '周五',
          title: '1月19日'
        }, {
          name: '周六',
          title: '1月20日'
        }, {
          name: '周日',
          title: '1月21日'
        }]
      }
    },
    methods: {
      onClose(val) {
        this.chooseShow = val
      },
      toBack() {
        uni.navigateBack(-1)
      },
      classifyChange(item) {
        this.btncount = item.type
      },
      onDateChange(ind) {
        this.dateCount = ind
      }
    }
  }
</script>

<style lang="less" scoped>
  .choose-head {
    box-sizing: border-box;
    padding: 0 40rpx;
    padding-top: var(--status-bar-height);
    width: 100%;
    height: 104rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;

    :first-child {
      width: 56rpx;
    }

    .head-title {
      flex: 1;
      text-align: center;
    }

    :last-child {
      width: 56rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #313131;
    }
  }

  .choose-top {
    width: 100%;
    height: 114rpx;
    box-sizing: border-box;
    padding: 0 36rpx;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.39);

    /deep/ .u-button--normal {
      margin: 0 15rpx;
    }

    /deep/ .u-button--info {
      color: #909090;
      background-color: #F9F9F9;
      font-size: 32rpx;
    }
  }

  .choose-prompt {
    width: 100%;
    height: 56rpx;
    background: rgba(255, 234, 201);
    font-size: 28rpx;
    font-weight: 500;
    color: #FF8560;
    box-sizing: border-box;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .choose-dates {
    height: 146rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 30rpx;

    :last-child {
      margin-right: 0 !important;
    }

    :first-child {
      margin-left: 0 !important;
    }

    .date-nav {
      height: 106rpx;
      border-radius: 10rpx;
      font-size: 32rpx;
      font-weight: 500;
      margin: 0 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      :first-child {
        color: #313131;
      }

      :last-child {
        color: #909090;
      }
    }

    .date-nav-active {
      height: 106rpx;
      border-radius: 10rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #fff;
      box-sizing: border-box;
      padding: 0 12rpx;
      background: rgba(47, 126, 252);
      margin: 0 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .choose-competition {
    width: 100%;
    overflow-y: auto;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    height: 934rpx;

    .competition-nav {
      width: 100%;
      height: 152rpx;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      position: relative;

      .nav-top {
        box-sizing: border-box;
        padding: 0 20rpx 0 24rpx;
        display: flex;
        align-items: center;
        padding-top: 14rpx;
        box-sizing: border-box;
        justify-content: flex-end;

        .competition-label {
          position: absolute;
          top: -6rpx;
          left: 24rpx;
          width: 162rpx;
          height: 54rpx;
          background: rgba(255, 226, 180);
          border-radius: 6rpx;
          font-size: 32rpx;
          font-weight: 400;
          line-height: 54rpx;
          color: #BC8631;
          text-align: center;
        }

        .competition-btn {
          width: 90rpx;
          height: 34rpx;
          background: rgba(234, 234, 234);
          border-radius: 20rpx;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 34rpx;
          text-align: center;
          color: #2F7EFC;
        }
      }

      .nav-trip {
        height: 104rpx;
        width: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 40rpx 0 56rpx;

        .competition-time {
          font-size: 36rpx;
          font-weight: 500;
          color: #2F7EFC;
        }

        .competition-condition {
          flex: 1;
          display: flex;
          justify-content: center;
          font-size: 32rpx;
          font-weight: 500;
          color: #313131;
          align-items: center;

          :nth-child(2) {
            margin: 0 20rpx;

            image {
              height: 36rpx;
              width: 48rpx;
            }
          }
        }
      }
    }
  }
</style>